<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    var body = document.getElementsByTagName('body')[0]
    // console.log(body)
    var clock = document.createElement('div');
    clock.style.width = '500px'
    clock.style.height = "500px"
    clock.style.borderRadius = '50%';
    clock.style.border = '2px solid #666';
    clock.style.display = 'flex';
    clock.style.alignItems = 'center'
    clock.style.justifyContent = 'center';
    // clock.style.margin = '100px auto 0 auto';

    body.appendChild(clock)

    var dot = document.createElement('div');
    dot.style.width = '20px';
    dot.style.height = '20px';
    dot.style.borderRadius = "50%";
    dot.style.background = 'red';
    dot.style.left = '50%';
    dot.style.top = '50%';
    dot.style.margin = '-10px 0 0 -10px';
    dot.style.zIndex = 100;
    dot.style.position = 'absolute';
    clock.appendChild(dot)

    var hour = document.createElement('div')
    hour.style.width = '14px';
    hour.style.height = '32%';
    hour.style.background = 'rgba(0,0,0,0.6)';
    hour.style.left = '50%'
    hour.style.top = '18%'
    hour.style.margin = '-7px 0 0 -7px'
    hour.style.position = 'absolute'
    hour.style.borderRadius = '7px'
    hour.style.transformOrigin = "50% bottom"
    clock.appendChild(hour)

    var minute = document.createElement('div')
    minute.style.width = '10px';
    minute.style.height = '42%';
    minute.style.background = 'orange';
    minute.style.left = '50%'
    minute.style.top = "8%";
    minute.style.position = 'absolute';
    minute.style.margin = '-5px 0 0 -5px';
    minute.style.borderRadius = "5px";
    minute.style.transformOrigin = '50% bottom';
    clock.appendChild(minute)

    var second = document.createElement('div')
    second.style.width = '2px'
    second.style.height = '60%'
    second.style.left = '50%'
    second.style.background = 'red';
    second.style.position = 'absolute'
    second.style.margin = '-1px 0 0 -1px'
    second.style.transformOrigin = "50% 83%"
    clock.appendChild(second)

    function doRotate(){
      var now = new Date();
      second.style.transform = 'rotate('+now.getSeconds() * 6+'deg)'
      minute.style.transform = 'rotate('+(now.getMinutes() * 6 + now.getSeconds()/10)+'deg)'
      hour.style.transform = 'rotate('+(now.getHours() * 30 + 1/2 * now.getMinutes() + 1/120 * now.getSeconds()) + 'deg)'
    }
    setInterval(function(){
      doRotate()
    },1000)
  </script>
</body>
</html>
